<template>
  <!-- 必须给外层盒子一个高度，否则 autoresize 也撑不开 -->
  <div class="w-full h-full">
    <v-chart :option="option" autoresize />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
} from "echarts/components";
import VChart from "vue-echarts";

/* 1️⃣ 一次性注册所有用到的部件 */
use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TooltipComponent,
  TitleComponent,
]);

/* 2️⃣ 父组件传进来的数据 */
interface Props {
  data: number[];
}
const props = defineProps<Props>();

/* 3️⃣ 最小可跑的折线配置 */
const option = computed(() => ({
  grid: { top: 10, right: 10, bottom: 10, left: 10, containLabel: true },
  xAxis: {
    type: "category",
    show: true,
    data: props.data.map((_, i) => i), // 2️⃣ 索引当横坐标
  },

  yAxis: {
    type: "value",
    show: true,
  },
  series: [
    {
      type: "line",
      data: props.data,
      smooth: true,
      lineStyle: { color: "#0ea5e9" },
      symbol: "none",
    },
  ],
  tooltip: { trigger: "axis" },
}));
</script>
